<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            text-align: center;
        }

        .box1 {
            margin: 0 5px;
            display: flex;
        }

        .box2 {
            display: flex;
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
    <div class="box2">
        <button class="shang" id="btn">上一页</button>
        <div class="box1">
            <div class="dangqian">1</div>
            <div>/</div>
            <div class="zongyeshu">4</div>
        </div>
        <button class="xia" id="btn2">下一页</button>
    </div>

</body>

</html>
<script src="./04-ajax.js"></script>
<script>
    

    //初始页数为1
    var page = 1
    if (page == 1) {
        document.getElementById("btn").disabled = true;
    }
    //默认为第一页 显示10个表情
    ajax('get', 'https://yantianfeng.com/api/emotion', { page: page, count: 10 }).then((data)=>{
        var str = data.emotions.map((item, index) => {
            return `<div> <img src="${item.url}"/> <div>${item.title}</div></div>`
        }).join('')
        // console.log(data)
        document.querySelector('.box').innerHTML = str
        // document.querySelector('.box1 .dangqian').innerHTML = page
    })
    //将对象格式转为查询字符串格式
    function objToSearchString(obj) {
        var str = '';
        //遍历对象, 将对象obj的每个属性名和属性值拼接为 key=value& 的格式
        for (var key in obj) {
            str += `${key}=${obj[key]}&`
        }
        console.log(str)
        //返回拼接好的字符串  key=value&key=value&key=value&key=value
        return str.slice(0, str.length - 1);
    }





    //按钮上一页绑定点击事件
    document.querySelector('.shang').onclick = function () {
        document.getElementById("btn2").disabled = false;

        if (page > 1) {
            ajax('get', 'https://yantianfeng.com/api/emotion', { page: --page, count: 10 }).then((data)=>{
                var str = data.emotions.map((item, index) => {
                    return `<div> <img src="${item.url}"/> <div>${item.title}</div></div>`
                }).join('')
                // console.log(data)
                document.querySelector('.box').innerHTML = str
                document.querySelector('.box1 .dangqian').innerHTML = page
            })
        }
        //判断如果当前页为第一页禁用上一页按钮
        if (page == 1) {
            document.getElementById("btn").disabled = true;
        }

    }

    //按钮下一页绑定点击事件
    document.querySelector('.xia').onclick = function () {
        document.getElementById("btn").disabled = false;


        if (page < 4) {

            ajax('get', 'https://yantianfeng.com/api/emotion', { page: ++page, count: 10 }).then((data)=>{
                var str = data.emotions.map((item, index) => {
                    return `<div> <img src="${item.url}"/> <div>${item.title}</div></div>`
                }).join('')
                // console.log(data)
                document.querySelector('.box').innerHTML = str
                document.querySelector('.box1 .dangqian').innerHTML = page
            })
            //判断如果当前页为最后一页禁用下一页按钮
            if (page == 4) {
                document.getElementById("btn2").disabled = true;

            }
        }

    }

</script>